<template>
  <div class="project-done-container">
    <!-- 搜索和过滤区域 -->
    <div class="search-filter-section">
      <el-form :inline="true" class="filter-form">
        <!-- 项目名称搜索 -->
        <el-form-item label="项目名称">
          <el-input
              v-model="searchForm.projectName"
              placeholder="请输入项目名"
              prefix-icon="el-icon-search"
              style="width: 190px"
              @keyup.enter.native="handleSearch">
          </el-input>
        </el-form-item>
        
        <!-- 重要程度筛选 -->
        <el-form-item label="重要程度">
          <el-select v-model="searchForm.importantLevel" placeholder="选择重要程度" clearable style="width: 160px">
            <el-option label="非常重要" value="非常重要"></el-option>
            <el-option label="重要" value="重要"></el-option>
            <el-option label="不重要" value="不重要"></el-option>
          </el-select>
        </el-form-item>

        <!-- 项目类别筛选 -->
        <el-form-item label="项目类别">
          <el-select v-model="searchForm.projectType" placeholder="选择项目类别" clearable style="width: 160px">
            <el-option label="内部项目" value="内部项目"></el-option>
            <el-option label="外部项目" value="外部项目"></el-option>
            <el-option label="研发项目" value="研发项目"></el-option>
          </el-select>
        </el-form-item>

        <!-- 预算范围筛选 -->
        <el-form-item label="预算范围">
          <el-input-number 
            v-model="searchForm.minBudget" 
            :min="0" 
            placeholder="最小预算">
          </el-input-number>
          <span style="margin: 0 8px;">-</span>
          <el-input-number 
            v-model="searchForm.maxBudget" 
            :min="0" 
            placeholder="最大预算">
          </el-input-number>
        </el-form-item>

        <!-- 按钮组 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="main-table-section">
      <el-card>      
        <!-- 添加表格头部区域 -->
        <div slot="header" class="table-header">
          <div class="left-section">
            <span class="section-title">已审查项目列表</span>
          </div>
          <div class="right-section">
            <el-button-group>
              <el-button size="small" @click="refreshData">
                <i class="el-icon-refresh"></i> 刷新
              </el-button>
              <el-button size="small" type="primary" @click="exportToExcel">
                <i class="el-icon-download"></i> 导出
              </el-button>
            </el-button-group>
          </div>
        </div>

        <el-table 
          :data="paginatedTableData" 
          style="width: 100%"
          :stripe="true"
          :border="true">
          <el-table-column
              v-for="(value, key, index) in parentsCloums"
              :label="value.name"
              :prop="value.propName"
              :key="index">
          </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="filteredTableData.length"
            layout="total, prev, pager, next">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import http from "@/api/http";
import * as XLSX from 'xlsx';  

export default {
  name: "ProjectDone",
  data() {
    return {
      searchForm: {
        projectName: '',
        importantLevel: '',
        projectType: '',
        minBudget: '',
        maxBudget: ''
      },
      parentsCloums: [ //表头
        {
          name: "项目名称",
          propName: "projectName",
        }, {
          name: "合同额",
          propName: "contractAmount",
        }, {
          name: "重要程度",
          propName: "importantLevel",
        },{
          name: "预算",
          propName: "budget",
        },{
          name: "项目类别",
          propName: "projectType",
        },{
          name: "审查情况",
          propName: "projectStatus"
        }
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 11,  // 每页显示11条数据
    }
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(item => {
        // 项目名称筛选
        const nameMatch = !this.searchForm.projectName || 
          item.projectName.toLowerCase().includes(this.searchForm.projectName.toLowerCase());

        // 重要程度筛选
        const levelMatch = !this.searchForm.importantLevel || 
          item.importantLevel === this.searchForm.importantLevel;

        // 项目类别筛选
        const typeMatch = !this.searchForm.projectType || 
          item.projectType === this.searchForm.projectType;

        // 预算范围筛选
        const budgetMatch = (!this.searchForm.minBudget || item.budget >= this.searchForm.minBudget) && 
          (!this.searchForm.maxBudget || item.budget <= this.searchForm.maxBudget);

        return nameMatch && levelMatch && typeMatch && budgetMatch;
      });
    },
    paginatedTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredTableData.slice(start, end);
    }
  },
  methods: {
    getinfo() {
      http.get("/api/audit/approved")
          .then(res => {
            this.tableData = res;
          })
    },
    handleSearch() {
    },
    resetSearch() {
      this.searchForm = {
        projectName: '',
        importantLevel: '',
        projectType: '',
        minBudget: '',
        maxBudget: ''
      };
      this.currentPage = 1;  
      this.getinfo();
    },
    refreshData() {
      this.getinfo();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    exportToExcel() {
      // 使用过滤后的数据
      const dataToExport = this.filteredTableData.map(item => {
        return {
          '项目名称': item.projectName,
          '合同额': item.contractAmount,
          '重要程度': item.importantLevel,
          '预算': item.budget,
          '项目类别': item.projectType,
          '审查情况': item.projectStatus
        };
      });

      // 创建工作簿
      const worksheet = XLSX.utils.json_to_sheet(dataToExport);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, '已完成项目');

      // 设置列宽
      const columnWidths = [
        { wch: 20 }, // 项目名称
        { wch: 12 }, // 合同额
        { wch: 10 }, // 重要程度
        { wch: 12 }, // 预算
        { wch: 10 }, // 项目类别
        { wch: 12 }  // 审查情况
      ];
      worksheet['!cols'] = columnWidths;

      // 获取当前时间作为文件名的一部分
      const date = new Date();
      const timestamp = `${date.getFullYear()}${(date.getMonth()+1).toString().padStart(2,'0')}${date.getDate().toString().padStart(2,'0')}`;
      
      // 导出文件
      XLSX.writeFile(workbook, `已审查项目列表_${timestamp}.xlsx`);

      // 提示导出成功
      this.$message({
        message: '导出成功',
        type: 'success',
        duration: 2000
      });
    }
  },
  created() {
    this.getinfo()
  }
}
</script>

<style scoped>
.project-done-container {
  height: 100%;
}

.search-filter-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-left:30px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.main-table-section {
  background: #fff;
  border-radius: 4px;
  margin: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
}

.right-section {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>